<nz-card [nzTitle]="title" class="my-card" [nzExtra]="extraTemplate">
  <div class="overview-data">
    <div class="round-rectangle">
      <i class="iconfont iconrongqi icon-font"></i>
    </div>
    <div style="width:70%">
      <div class="overview-data-num">
        <ng-container *ngIf="title === '容器基线'; else containerTotal">
          <div>容器基线:</div>
          <div>{{ total }}</div>
        </ng-container>
        <ng-template #containerTotal>
          <div>总数:</div>
          <div>{{ total }}</div>
        </ng-template>
      </div>
      <div class="divider"></div>
      <div class="overview-data-num">
        <ng-container *ngIf="title === '容器基线'; else baselineTotal">
          <div>基线总数:</div>
          <div>{{ useCount }}</div>
        </ng-container>
        <ng-template #baselineTotal>
          <div>使用数:</div>
          <div>{{ useCount }}</div>
        </ng-template>
      </div>
    </div>
  </div>
  <nz-divider nzDashed>
  </nz-divider>
  <div class="upload">
    <div [ngSwitch]="title">
      <ng-container *ngSwitchCase="'漏洞'">
        <div nz-row nzGutter="16">
          <div nz-col nzSpan="12">
            <button nz-button [nzType]="'primary'" (click)="createComponentModal('CVE')" style="margin-top: 16px">
              <i nz-icon type="plus" theme="outline"></i>
              CVE
            </button>
          </div>
          <div nz-col nzSpan="12">
            <button nz-button [nzType]="'primary'" (click)="createComponentModal('CNNVD')" style="margin-top: 16px">
              <i nz-icon type="plus" theme="outline"></i>
              CNNVD
            </button>
          </div>
        </div>
      </ng-container>
      <ng-container *ngSwitchCase="'容器基线'">
        <div nz-row nzGutter="16">
          <div nz-col nzSpan="12">
            <button nz-button [nzType]="'primary'" (click)="createComponentModal('容器')" style="margin-top: 16px">
              <i nz-icon type="plus" theme="outline"></i>
              容器
            </button>
          </div>
          <div nz-col nzSpan="12">
            <button nz-button [nzType]="'primary'" (click)="createComponentModal('基线')" style="margin-top: 16px">
              <i nz-icon type="plus" theme="outline"></i>
              基线
            </button>
          </div>
        </div>
      </ng-container>
      <ng-container *ngSwitchDefault>
        <button nz-button [nzType]="'primary'" (click)="createComponentModal(title)" style="margin-top: 16px">
          <i nz-icon type="plus" theme="outline"></i>
          {{ title }}
        </button>
      </ng-container>
    </div>
    <div class="down-template" nz-row>
      <div nz-col [nzSpan]="18">
        <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload" nzMultiple [nzFilter]="filters"
          [nzShowButton]="fileList.length < 1">
          <button nz-button nzType="primary" nzGhost>
            批量上传<i nz-icon type="arrow-up" theme="outline"></i>
          </button>
        </nz-upload>
      </div>
      <div nz-col [nzSpan]="6">
        <div [ngSwitch]="title">
          <ng-container *ngSwitchCase="'漏洞'">
            <nz-dropdown>
              <a nz-dropdown>模板下载</a>
              <ul nz-menu nzSelectable class="download-ul">
                <li nz-menu-item>
                  <a (click)="downloadJar('cve','xml')">cve的xml格式</a>
                </li>
                <li nz-menu-item>
                  <a (click)="downloadJar('cve','json')">cve的json格式</a>
                </li>
                <li nz-menu-item>
                  <a (click)="downloadJar('cnnvd','xml')">cnnvd的xml格式</a>
                </li>
                <li nz-menu-item>
                  <a (click)="downloadJar('cnnvd','json')">cnnvd的json格式</a>
                </li>
              </ul>
            </nz-dropdown>
          </ng-container>
          <ng-container *ngSwitchCase="'容器基线'">
            <nz-dropdown>
              <a nz-dropdown>模板下载</a>
              <ul nz-menu nzSelectable class="download-ul">
                <li nz-menu-item>
                  <a (click)="downloadJar('容器','xml')">容器的xml格式</a>
                </li>
                <li nz-menu-item>
                  <a (click)="downloadJar('容器','json')">容器的json格式</a>
                </li>
                <li nz-menu-item>
                  <a (click)="downloadJar('基线','xml')">基线的xml格式</a>
                </li>
                <li nz-menu-item>
                  <a (click)="downloadJar('基线','json')">基线的json格式</a>
                </li>
              </ul>
            </nz-dropdown>
          </ng-container>
          <ng-container *ngSwitchDefault>
            <nz-dropdown>
              <a nz-dropdown>模板下载</a>
              <ul nz-menu nzSelectable class="download-ul">
                <li nz-menu-item>
                  <a (click)="downloadJar(title,'xml')">xml格式</a>
                </li>
                <li nz-menu-item>
                  <a (click)="downloadJar(title,'json')">json格式</a>
                </li>
              </ul>
            </nz-dropdown>
          </ng-container>
        </div>
      </div>
    </div>
    <button nz-button [nzType]="'primary'" [nzLoading]="uploading" (click)="handleUpload()"
      [disabled]="fileList.length == 0" style="margin-top: 16px">
      {{ uploading ? '正在上传' : '开始上传' }}
    </button>
  </div>
</nz-card>
<ng-template #extraTemplate>
  <a [routerLink]="['/layout/platform/data-center/detail']"
    [queryParams]="{title: title,total:total,useCount:useCount}">
    {{ title }} 详情 &gt; </a>
</ng-template>